<template>
  <div class="app-container">
    <el-form ref="form" label-width="130px" :model="form" :rules="rules">
      <el-form-item label="用户名称" prop="loginName">
        <el-col :span="8"><el-input v-model="form.loginName" @blur="getCode"></el-input></el-col>
      </el-form-item>

      <el-form-item label="真实姓名" prop="lastName">
        <el-col :span="8"><el-input v-model="form.lastName"></el-input></el-col>
      </el-form-item>

      <el-form-item label="手机号" prop="mobile">
        <el-col :span="8"><el-input v-model="form.mobile"></el-input></el-col>
      </el-form-item>

      <el-form-item label="角色">
        <el-select placeholder="请选择活动区域" v-model="form.roleIds" multiple>
          <el-option v-for="item in rolelistdata" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="绑定谷歌验证码">
        <div v-show="google_qrcode.length > 1"><qrcode :value="google_qrcode" :options="{ size: 150 }"></qrcode></div>

        <div>谷歌验证码密匙：{{ google_key }}</div>
      </el-form-item>

      <el-form-item label="谷歌验证码" prop="googleCode">
        <el-col :span="8"><el-input v-model="form.googleCode"></el-input></el-col>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-col :span="8"><el-input v-model="form.password"></el-input></el-col>
      </el-form-item>

      <el-form-item label="确认密码" prop="newpassword">
        <el-col :span="8"><el-input v-model="form.newpassword"></el-input></el-col>
      </el-form-item>

      <el-form-item><el-button type="primary" @click="submit" :loading="requesting">确定</el-button></el-form-item>
    </el-form>
  </div>
</template>

<script>
import { rolelist, getGooglecode, add, getById, update } from '@/api/sys/admin';
import QRcode from '@xkeshi/vue-qrcode';

export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      form: {},
      rolelistdata: [],
      google_key: '',
      google_qrcode: '',
      roleparam: {
        pageSize: 100,
        pageNum: 1
      },
      isEdit: false,
      requesting: false,
      rules: {
        loginName: [{ required: true, message: '请填写用户名称', trigger: 'blur' }],
        lastName: [{ required: true, message: '请填写真实姓名', trigger: 'blur' }],
        mobile: [{ required: true, message: '请填写手机号', trigger: 'blur' }],
        googleCode: [{ required: true, message: '请填写google验证码', trigger: 'blur' }],
        password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
        newpassword: [{ required: true, message: '请填写密码', trigger: 'blur' }, { validator: validatePass2, trigger: 'blur' }]
      }
    };
  },
  components: {
    qrcode: QRcode
  },
  created(options) {
    // 初始数据
    console.info('初始数据', this.$route.query);
    this.getrolelist();

    let adminid = this.$route.query.id;
    if (adminid) {
      this.isEdit = true;
      this.getinfo(adminid);
    } else {
      this.isEdit = false;
    }
  },
  mounted() {
    console.info('mounted');
  },
  methods: {
    //获取管理员信息
    getinfo(id) {
      getById({ adminId: id }).then(res => {
        console.info('查询', res);
        this.form = res.result;
        this.getCode();
      });
    },

    // 获取角色列表
    getrolelist() {
      rolelist(this.roleparam).then(res => {
        this.rolelistdata = res.result.list;
      });
    },
    getCode() {
      if (this.form.loginName) {
        let request_data = { account: this.form.loginName };
        getGooglecode(request_data).then(res => {
          this.google_key = res.result.secretKey;
          this.google_qrcode = res.result.qrCode;

          this.form.bandGoogleCapt = res.result.secretKey;
          this.form.qrCode = res.result.secretKey;
        });
      }
    },
    submit() {
      // 校验
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 校验成功

          if (this.requesting) return;
          this.requesting = true;
          if (this.isEdit) {
            update(this.form)
              .then(res => {
                this.$message({
                  type: 'success',
                  message: res.message
                });
                this.$router.go(-1);
                this.requesting = false;
              })
              .catch(() => {
                this.requesting = false;
              });
          } else {
            add(this.form)
              .then(res => {
                this.$message({
                  type: 'success',
                  message: res.message
                });
                this.$router.go(-1);
                this.requesting = false;
              })
              .catch(() => {
                this.requesting = false;
              });
          }
        } else {
          return;
        }
      });
    }
  }
};
</script>

<style></style>
